<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#allmap {position: relative;}
	#tools {
		position: absolute;
		left:0;
		top:0;
		z-index: 1000;
		/* 
		播放动画、停止播放-按钮点击没反应，
		是因为按钮低于 地图蒙层 的 z-index

		*/
	}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="tools">
		<button id="start">播放动画</button>
		<button id="end">停止播放</button>
	</div>
</body>
</html>
<script type="text/javascript">
  	var bmap = new BMapGL.Map("allmap"); // 创建Map实例
	bmap.centerAndZoom(new BMapGL.Point(116.414, 39.915), 20);  // 初始化地图，设置中心点坐标和地图级别
	bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
	bmap.setTilt(20); // 设置地图初始倾斜角度

	/*
	## 1.自定义关键帧 
	*/
	var keyFrames = [
		{
			center: new BMapGL.Point(116.307092,40.054922), // 定义第一个关键帧帧地图中心点
			zoom:20, // 定义第一个关键帧地图等级
			tilt: 50, // 定义第一个关键帧地图倾斜角度
			heading: 0, // 定义第一个关键帧地图旋转方向
			percentage: 0  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
		},
		{
			center: new BMapGL.Point(116.307631,40.055391),
			zoom: 21,
			tilt: 70,
			heading: 0,
			percentage: 0.1
		},
		{
			center: new BMapGL.Point(116.306858,40.057887),
			zoom:21,
			tilt: 70,
			heading: 0,
			percentage: 0.25
		},
		{
			center: new BMapGL.Point(116.306858,40.057887),
			zoom:21,
			tilt: 70,
			heading: -90,
			percentage: 0.35
		},
		{
			center: new BMapGL.Point(116.307904,40.058118),
			zoom: 21,
			tilt: 70,
			heading: -90,
			percentage: 0.45
		},
		{
			center: new BMapGL.Point(116.307904,40.058118),
			zoom: 21,
			tilt: 70,
			heading: -180,
			percentage: 0.55
		},
		{
			center: new BMapGL.Point(116.308902,40.055954),
			zoom:21,
			tilt: 70,
			heading: -180,
			percentage: 0.75
		},
		{
			center: new BMapGL.Point(116.308902,40.055954),
			zoom:21,
			tilt: 70,
			heading: -270,
			percentage: 0.85
		},
		{
			center: new BMapGL.Point(116.307779,40.055754),
			zoom:21,
			tilt: 70,
			heading: -360,
			percentage: 0.95
		},
		{
			center: new BMapGL.Point(116.307092,40.054922),
			zoom:20,
			tilt: 50,
			heading: -360,
			percentage: 1
		},
	];
	
	/*
	## 2.设置动画属性
	*/
	var opts = {
		duration: 10000, // 设置每次迭代动画持续时间
		delay: 3000,// 设置动画延迟开始时间
		interation: 'INFINITE' // 设置动画迭代次数
	};

	/*
	## 3.监听动画事件

	JSAPI支持监听自定义关键帧3D动画的事件，您可以监听到自定义动画的开始事件、迭代事件、结束事件以及中途终止事件。
	*/
	var animation = new BMapGL.ViewAnimation(keyFrames, opts);        // 初始化动画实例
	animation.addEventListener('animationstart', function(e) {        // 监听动画开始事件
		console.log('start');
	});
	animation.addEventListener('animationiterations', function(e) {   // 监听动画迭代事件
		console.log('onanimationiterations');
	});
	animation.addEventListener('animationend', function(e) {        // 监听动画结束事件
		console.log('end');
	});
	animation.addEventListener('animationcancel', function(e) {       // 监听动画中途被终止事件
		console.log('cancel');
	});

	/*
	## 4.开始播放动画
	
	您可以通过startViewAnimation方法来开始播放自定义关键帧3D动画，该方法接收一个动画实例作为参数。
	*/
	document.getElementById('start').addEventListener('click', function() {
		bmap.startViewAnimation(animation);         // 开始播放动画
	});

	/*
	## 5.强制停止动画
	
	您可以通过clearViewAnimation方法来强制停止动画，该方法接收一个动画实例作为参数。
	*/
	document.getElementById('end').addEventListener('click', function() {
		bmap.cancelViewAnimation(animation);         // 强制停止动画
	});
</script>
